<template>
    <div :class="[orders.length>0?'':'empty','bg','page-orderlist']">
    <div class="cont">
    	<div key="index" v-for="(item,index) in orders" class="order-item">
			<router-link :to="{ name: 'OrderDetail', query: { orderId: 123 }}">
		    	<h3>
		    		<p v-if="!adminstatus">{{getFullTime(item.createTime)}}</p>
		    		<b v-if="adminstatus">{{item.companyName}}</b>
		    		<span>服务中</span>
		    	</h3>
				<ul>
					<li>
						<label>服务类型：</label>
						<p class="em">{{item.servcatName}}</p>
					</li>
					<li>
						<label>服务明细：</label>
						<p>{{item.ispServ[0].description}}</p>
					</li>
					<li>
						<label>合同时间：</label>
						<p>{{getDate(item.contractStartDate)}} - {{getDate(item.contractEndDate)}}</p>
					</li>
					<li>
						<label>合同金额：</label>
						<p>￥{{item.contractAmount}}</p>
					</li>
				</ul>
			</router-link>
			<div @click.stop="openMenu(item.mobile)" v-if="adminstatus" class="contact">
				<label>{{getFullTime(item.createTime)}}</label>
				<span>{{item.venderContactName}}</span>
			</div>
		</div>
    </div>
    	
   <div @click.stop="closelist" v-if="phoneStatus" class="openMenu">
    	<ul @click.stop="">
    		<li>{{mobile}}</li>
    		<li class="call">
    			<a href="'tel:'+mobile">呼叫</a> 
    		</li>
    		<li @click.stop="closelist" class="cancle">取消</li>
    	</ul>
    </div>
    </div>
</template>

<script>

import http from '../services/http';
import { mapState } from 'vuex';

export default {
	name:'order-process',
    data() {
      return {
      	phoneStatus:false,
  		mobile:"",
      }
    },
    props:{
		toast:{
			type: Function,
			required: true
		},
		select:{
			type: Function,
			required: true
		},
		getFullTime:{
			type: Function,
		},
		getDate:{
			type: Function,
		},
	},
	computed:{
		...mapState({
			orders:state => state.order.orderProcess,
			adminstatus:state => state.user.usertype=="isp_provider_user"?false:true,
		})
	},
	methods:{
		openMenu(mobile){
    		this.phoneStatus = true;
    		this.mobile = mobile;
    	},
    	closelist(){
    		this.phoneStatus = false;
    	},
	},
    created(){
    	this.$store.dispatch({
		    type: 'getOrderProcess'
	  	});
	  	if(this.$route.query.orderSelect){
	  		this.select(this.$route.query.orderSelect);
		}
    },
};


 
	
</script>
